<template>
  <div class="container">
    <Header></Header>
    <div class="tabbar"></div>
    <div class=" view-content">
      <div class=" view-list">
       
        <a href="javascript:;" class=" item-content"  v-for="(article, aindex) in indexList" @click="goToDetail(article.id)" :key="aindex">
          <div
            class=" item-bg"
            :style="{'background-image': 'url('+getImgUrl(article.thumb)+')'}"
          ></div>
          <div class=" item-title">
            {{article.title}}
          </div>
          <div class=" item-intro">
            <div class=" item-tag"> {{article.tags}}</div>
            <div class=" item-time"> {{article.add_time | formatDate}}</div>
          </div>
          </a>
        <div v-if="page < total" class="Button-LoadingMore" @click="getMore">
          加载更多
        </div>
      </div>
    </div>
    <!-- <van-popup v-model="show" position="right" :style="{ height: '100%',width:'50%'}" use-slot>
    <van-index-bar :index-list="indexList">
      <van-index-anchor>标题1</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />

      <van-index-anchor>标题2</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />

    </van-index-bar>
  </van-popup> -->
  </div>
</template>

<script>
import Header from "./../../components/header/Header.vue";
import {getArticleList} from '@/service/index.js';
export default {
  name: "LiuxueNews",
  components: {
    Header,
  },
  data() {
    return {
      active: 0,
      show: false,
      indexList: [],
      total: 0,
      page:1,
      size:8,
      
    };
  },
  created(){
    this.getData();
  },
  methods: {
    goToDetail(id){
      this.$router.push({ path: "/newsDetail" , query:{id:id}});
    },
    getMore(){
      this.page++;
      this.getData();
    },
    getData(){
      getArticleList({page:this.page,size:this.size,cate_id:32}).then(response=>{
        console.log(response)
        if(response.code == 200){
          this.indexList =this.indexList.concat(response.data.list)
          this.total = Math.ceil(response.data.total / this.size)
          console.log( this.total)
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    onClick(index) {
      console.log(index);
    },
    showPopup() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="less">
.container {
  .category {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .van-index-anchor {
    font-size: 1rem !important;
    color: rgb(0, 164, 255) !important;
  }
  .tabbar {
    padding-top: 0.8rem;
  }
}
.view-content {
    padding: .28rem 0.75rem 0px;
}
.view-list {
    width: 100%;
    overflow: hidden;
    padding-bottom: 1.375rem;
}

.item-content {
    display: block;
    cursor: pointer;
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid rgb(236, 236, 236);
}

.item-content .item-bg {
    flex: 0 0 42.5%;
    height: 7.375rem;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 2.5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2.5px 5px 0px;
}

.item-content .item-title {
    color: rgb(42, 65, 84);
    font-size: 0.8rem;
    padding: 0.4rem 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-break: break-all;
    text-align: justify;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box !important;
}

.item-content .item-intro {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.item-content .item-tag {
    border-radius: 0.125rem;
    border: 1px solid rgb(0, 164, 255);
    background-color: rgb(239, 249, 255);
    color: rgb(38, 171, 255);
    font-size: 0.5rem;
    line-height: 0.8rem;
    letter-spacing: 0.01px;
    padding: 0.05rem 0.125rem;
}

.item-content .item-time {
    text-align: left;
    color: rgb(115, 116, 116);
    font-size: 0.7rem;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.Button-LoadingMore{
    color: rgb(0, 164, 255);
    font-size: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    width: 10.15rem;
    height: 1.8rem;
    border-radius: 0.15rem;
    background-color: rgb(203, 236, 255);
    margin: 0px auto;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
</style>
